<template>
  <el-row style="padding: 80px 20px 0 20px;background-color:#f8fafd">
    <!-- 顶部搜索框 -->
    <div class="searchbox">
      <span class="left">商品类型搜索：</span>
      <el-input placeholder="请输入" v-model="searchinfo.skuName" clearable></el-input>
      <el-button icon="el-icon-search" @click="searchbtn">查询</el-button>
    </div>
    <!--中部新建按钮  -->
    <div class="down">
      <div class="mid">
        <el-button  class="create" icon="el-icon-circle-plus-outline" @click="createDia.visible=true">新建</el-button>
        <el-button class="input" @click="input=true">导入数据</el-button>
      </div>
      <el-table  :data="goodsmanagelist.currentPageRecords" stripe style="width: 100%">
        <el-table-column  type="index" label="序号" width="80"/>
        <el-table-column prop="skuName" label="商品名称" min-width="140"/>
        <el-table-column prop="skuImage" label="商品图片" width="140">
          <template v-slot="{row}">
              <img style="wdith:24px;height:24px" :src="row.skuImage" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="brandName" label="品牌" width="145"/>
        <el-table-column prop="unit" label="规格" width="145"/>
        <el-table-column prop="price" label="商品价格" width="145" :formatter="formatterPrice"/>
        <el-table-column prop="skuClass.className" label="商品类型" width="140"/>
        <el-table-column prop="createTime" label="创建日期" min-width="160" :formatter="formatterTime"/>
        <el-table-column  label="操作" width="100">
          <template v-slot="{ row }">
            <a href="javascript:;" @click="changegoodsmanage(row)">修改</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageinfo" >
          <span>共条{{this.goodsmanagelist.totalCount}}记录  第{{this.goodsmanagelist.pageIndex}}/{{this.goodsmanagelist.totalPage}}页</span>
          <div class="button">
            <el-button class="pagebutton" :disabled="goodsmanagelist.pageIndex==='1'||''?true:false" @click="pageup">上一页</el-button>
            <el-button class="pagebutton" :disabled="goodsmanagelist.pageIndex===goodsmanagelist.totalPage" @click="pagedown">下一页</el-button>
          </div>
      </div>
      <!-- 新建的dialog -->
      <el-dialog  :title="createDia.type"  :visible="createDia.visible"  width="50%" @close="createDia.visible=false" center>
            <el-form ref="addform" style="pading:20px 20px;display:flex;justify-content:center;width:100%" :model="addGoodsForm" >
              <el-form-item prop="skuName" label="商品名称" :rules="[{required:true,message:'请输入商品名称',trigger:'blur'}]" >
                <el-input  style="width:400px" type="text"  placeholder="请输入"  v-model="addGoodsForm.skuName"  maxlength="15"  show-word-limit/>
              </el-form-item>
              <el-form-item prop="brandName" label="品牌" :rules="[{required:true,message:'请输入商品类型',trigger:'blur'}]" >
                <el-input  style="width:400px" type="text"  placeholder="请输入"  v-model="addGoodsForm.brandName"  maxlength="10"  show-word-limit/>
              </el-form-item>
              <el-form-item  prop="price" label="商品价格(元)" :rules="[{required:true,message:'请输入商品类型',trigger:'blur'}]" >
                 <el-input-number  :step="1.5" placeholder="请输入"  style="width:400px" v-model="addGoodsForm.price" controls-position="right" @change="handleChange" />
              </el-form-item>
              <el-form-item prop="classId" label="商品类型" :rules="[{required:true,message:'请输入商品类型',trigger:'blur'}]" >
                <el-select style="width:400px" v-model="addGoodsForm.classId">
                  <el-option v-for="item,index in goodstypelist.currentPageRecords" :key="index" :label="item.className" :value="item.classId"/>
                </el-select>
              </el-form-item>
              <el-form-item prop="unit" label="规格" :rules="[{required:true,message:'请输入商品类型',trigger:'blur'}]" >
                <el-input  style="width:400px" type="text"  placeholder="请输入"  v-model="addGoodsForm.unit"  maxlength="15"  show-word-limit/>
              </el-form-item>
              <el-form-item class="img" prop="skuImage" label="图片" :rules="[{required:true,message:'请输入商品类型',trigger:'blur'}]" >
                  <el-upload v-if="isShow"  action="https://likede2-admin.itheima.net/likede/api/vm-service/sku/fileUpload"  name="fileName"  list-type="picture-card" :limit="1"  :on-change="handleChange">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <img style="width:76px;height:76px" @click="update" v-else :src="editimg" alt="">
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="createDia.visible = false">取 消</el-button>
              <el-button class="pagebutton" type="primary" @click="createSubmit">确 定</el-button>
            </span>
      </el-dialog>
      <!-- 导入的dialog -->
       <el-dialog  title="导入文件"  :visible="input"  width="30%" @close="input=false" center>
            <el-upload ref="inputfile" style="display:flex ;justify-content:center;flex-direction: column;"
            :headers="myheaders"  class="upload-demo" :auto-upload="false"  name="fileName" action="https://likede2-admin.itheima.net/likede/api/vm-service/sku/upload"
            :on-change="change"
            :file-list="filelist"  :limit="1"   >
              <el-button style="width:221px" type="primary" icon="el-icon-upload">点击上传</el-button>
              <div slot="tip" style="text-align:center" class="el-upload__tip">支持扩展名：xls、xlsx，文件不得大于1M</div>
            </el-upload>

            <span slot="footer" class="dialog-footer">
              <el-button @click="input=false">取 消</el-button>
              <el-button class="pagebutton" type="primary" @click="inputSubmit">确 定</el-button>
            </span>
      </el-dialog>
    </div>
  </el-row>
</template>

<script>
import { searchgoods, addGoods, editGoods } from '@/api/goods/goodsmanage'
import { getgoodstypelist } from '@/api/goods/goodstype'
import { getToken } from '@/utils/localStorage'
export default {
  created () {
    this.searchgoods()// 调用重新获取列表的函数
    console.log(this.token)
  },
  data () {
    return {
      goodsmanagelist: {},
      searchinfo: {
        skuName: '',
        pageIndex: 1,
        pageSize: 10
      },
      createDia: {
        visible: false,
        searchinfo: '',
        type: '新增商品'
      },
      addGoodsForm: {
        brandName: '',
        classId: '',
        price: ' ',
        skuImage: '',
        skuName: '',
        unit: ''
      },
      goodstypelist: {},
      editimg: '',
      isShow: true,
      input: false,
      myheaders: {
        accept: 'application/json, text/plain',
        Authorization: getToken()
      },
      filelist: []

    }
  },
  methods: {
    searchbtn () { // 搜索
      this.searchgoods()
    },
    async pageup () { // 上一页
      this.goodsmanagelist.pageIndex--
      const { data } = await searchgoods({ skuName: this.searchinfo.skuName, pageIndex: this.goodsmanagelist.pageIndex, pageSize: 10 })
      this.goodsmanagelist = data
    },
    async pagedown () { // 下一页
      this.goodsmanagelist.pageIndex++
      const { data } = await searchgoods({ skuName: this.searchinfo.skuName, pageIndex: this.goodsmanagelist.pageIndex, pageSize: 10 })
      this.goodsmanagelist = data
    },
    async searchgoods () { // 重新获取列表(默认第一页 一页10条)
      const { data } = await searchgoods(this.searchinfo)
      console.log(data)
      this.goodsmanagelist = data
    },
    async createSubmit () { // 新建商品类型
      try {
        this.$refs.addform.validate(
          async isok => {
            if (isok && this.createDia.type === '新增商品') {
              await addGoods(this.addGoodsForm)
              this.$message.success('添加成功')
              this.searchgoods()
            } else if (isok && this.createDia.type === '修改商品') {
              await editGoods(this.addGoodsForm, this.createDia.skuId)// 修改
              this.$message.success('修改成功')
            }
          }
        )
      } catch (e) {
        console.log(e)
      } finally {
        this.createDia.visible = false
      }
    },
    async changegoodsmanage (row) { // 修改商品类型名称
      console.log(row)
      this.isShow = false
      this.createDia.skuId = row.skuId
      this.editimg = row.skuImage
      this.createDia.type = '修改商品'
      this.addGoodsForm.brandName = row.brandName
      this.addGoodsForm.price = row.price
      this.addGoodsForm.classId = row.skuClass.classId
      this.addGoodsForm.skuImage = row.skuImage
      this.addGoodsForm.skuName = row.skuName
      this.addGoodsForm.unit = row.unit
      // this.createDia.id = row.classId
      this.createDia.visible = true

      // console.log(row)
    },
    formatterTime (row, column, cellValue) {
      return cellValue.split('T').join(' ')
    },
    formatterPrice (row, column, cellValue) {
      return (cellValue / 100).toFixed(1)
    },
    async openDialog () {
      console.log(1)
      const { data } = await getgoodstypelist()
      console.log(data)
    },
    handleChange (a) { // 图片上传 触发
      this.addGoodsForm.skuImage = a.response
    },
    update () { // 修改时,点击图片可以上传文件
      this.isShow = true
      console.log(1)
    },
    async inputSubmit () {
      await this.$refs.inputfile.submit()
      this.input = false

      // this.$message.success('导入成功')
    },
    change (file, fileList) {
      console.log(file, fileList)
    }

  },
  watch: {
    async 'createDia.visible' (value, oldvalue) { // 监听dialog 的打开与关闭, 关闭时 刷新列表
      if (value === true) {
        const { data } = await getgoodstypelist()
        console.log('商品类型列表', data)
        this.goodstypelist = data
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  .searchbox {
    // background-color: skyblue;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    height: 64px;
    width: 100%;
    span{
      font-size: 14px;
      width:110px;
      line-height: 36px;
      height:36px;
    }
    .el-input {
      width: 210px;
      line-height: 36px;
      // height: 36px !important;
    }
    .el-button{
      background-color: #5f84ff;
      color: #fff;
      border: none;
      margin-left: 10px;
      width:80px;
      height:36px;
      padding: 0 0;
    }
  }
  .down{
    .mid{//新建按钮
    margin-bottom: 20px;
      .el-button.create{
        background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
        color:#fff ;
        border:none;
      }
      .el-button.create:hover{
        background: linear-gradient(135deg,#ff7d43,#db3602)!important;
      }
      .el-button.input{
        background: #fbf4f0!important;
        color:#655b56 ;
        border:none;
      }
      .el-button.input:hover{
        background:#f3e7e1!important;
      }
    }
    .pageinfo{//页脚的 页数信息
      display:flex;
      justify-content:space-between;
      width:100%;
      height:96px;
      padding:32px 16px;
      line-height:32px;
      .button{
        display: flex;
        .pagebutton{
          width:70px;
          height:32px;
          padding:0 0
        }
      }
    }
  }
}
.el-dialog__wrapper{
  /deep/.el-dialog__header{
    text-align: left !important;
  }
  .el-dialog__body{
    .el-form{
      display:flex;
      flex-direction: column;
      // justify-content: space-between;

    /deep/.el-form-item{
      width:100%;
      display: flex;
      justify-content: center;

      .el-form-item__label{
        // text-align: center;
        width: 140px !important;
        // background-color: #db3602;
      }
      // display:flex;
      // flex-direction: column;
    }
    /deep/.el-form-item.img{
      display: flex;
      justify-content: flex-start;
      margin-left: 56px;
      .el-upload.el-upload--picture-card{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 76px;
        height: 76px;
        >.el-upload-list__item{
          width: 76px!important;
          height: 76px!important;
        }

      }
    }
    }

  }
}
</style>
